<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->

<template>
  <router-view v-if="isRouterAlive" />

</template>

<script>

  import intro from 'intro.js' // introjs库
  import 'intro.js/introjs.css' // introjs默认css样式
  import 'intro.js/themes/introjs-modern.css' // introjs主题
  import { setStore, getStore } from '@/framework-core/utils/store'

export default {
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      isRouterAlive: true,
      introOption: { // 参数对象
        prevLabel: '上一步',
        nextLabel: '下一步',
        skipLabel: '跳过',
        doneLabel: '完成',
        tooltipClass: 'intro-tooltip', /* 引导说明文本框的样式 */
        // highlightClass: 'intro-highlight', /* 说明高亮区域的样式 */
        exitOnEsc: true, /* 是否使用键盘Esc退出 */
        exitOnOverlayClick: false, /* 是否允许点击空白处退出 */
        keyboardNavigation: true, /* 是否允许键盘来操作 */
        showBullets: false, /* 是否使用点显示进度 */
        showProgress: false, /* 是否显示进度条 */
        scrollToElement: true, /* 是否滑动到高亮的区域 */
        overlayOpacity: 0.5, // 遮罩层的透明度 0-1之间
        positionPrecedence: ['bottom', 'top', 'right', 'left'], /* 当位置选择自动的时候，位置排列的优先级 */
        disableInteraction: false, /* 是否禁止与元素的相互关联 */
        hidePrev: true, /* 是否在第一步隐藏上一步 */
        // hideNext: true, /* 是否在最后一步隐藏下一步 */
        steps: [], /* steps步骤，可以写个工具类保存起来 */
      },
      tipsImg1: '', // 新手引导的提示图片
      tipsImg2: ''// 新手引导的提示图片
    }
  },
  mounted () {
    this.$nextTick(() => {
      var guide = getStore({ name: 'guide' });
      if ((guide  === null ||guide !== "1") && (window.location.href.indexOf("/login")<=0) &&  getStore({ name: 'token' })) {
        this.initGuide();
        setStore({
          name: 'guide',
          content: "1"
        })
      }
    })
  },
  methods: {
    // 重新查看引导
    guideIntro(){
      this.initGuide()
    },
    initGuide() {
      // 绑定标签元素的选择器数组
      this.introOption.steps = [
        { title: '系统使用指导', element: '#step1', intro: `系统支持多租户，用户再多个租户和角色的，在右上角可以选择。<img src="` + this.tipsImg1 + `" alt="" style="width: 200px;margin-top: 15px;"/>`},
        { title: '个人信息', element: '#step2', intro: `点击个人头像/下拉图标，选择个人信息，初始密码为******，建议修改为个人账号密码。<img src="` + this.tipsImg2 + `" alt="" style="width: 125px;margin-top: 15px;"/>`, },
        { title: '重新引导', element: '#step3', intro: '点击此处可重新查看引导流程。', },
      ]
      intro()
              .setOptions(this.introOption)
              // 点击结束按钮后执行的事件
              .oncomplete(() => {
                console.log('点击结束按钮后执行的事件')
              })
              // 点击跳过按钮后执行的事件
              .onexit(() => {
                console.log('点击跳过按钮后执行的事件')
              })
              // 确认完毕之后执行的事件
              .onbeforeexit(() => {
                console.log('确认完毕之后执行的事件')
              })
              .start()
    },
    reload () {
      this.isRouterAlive = false
      this.$nextTick(function() {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

<style>
html,
body,
#app {
  width: 100%;
  height: 100%;
}


.el-card {
  --el-card-padding: 15px!important;
}

.avue-crud__header{
  padding-top: 5px!important;
}

.avue-crud__search{
  /* background-color: #f0f2f5; */
  padding-bottom: 8px;
}

.avue-crud__header {
  min-height: 35px!important;

}

.avue-crud__search .el-card__body {
  padding-bottom: 0px;
}


.avue-top .top-bar__title .el-input{
  margin-left: -40px;
}

.el-col {
  margin-bottom: 0px!important;
}

.avue-crud__dialog__menu{
  right: 5px!important;
}


.avue-crud .el-table .el-form-item__content .el-tooltip__trigger {
  width:100%;
}
.avue-crud .el-table .el-form-item__error {
  width:100%;
  text-align:left;
  position:relative
}

@media only screen and (max-width: 768px) {

  .noShowLable .el-form-item__label{
    display: none;
  }

  .loader{
    z-index: 9999;
  }

  /*移动端弹出框按钮*/
  .avue-crud__dialog__menu {
    right: 10px!important;
  }



  .top-bar__right{
    left: 5rem!important;
  }


  .el-col-xs-12 {
    display: block;
    max-width: 100%;
    flex: 0 0 100%;
  }
  .avue-crud__grid__content .avue-crud__grid__item{
    width: 100%!important;
  }

  /*.avue-crud__grid__content  .title{*/
  /*  width: 85%!important;*/
  /*}*/

  .avue-crud__grid .title {
    margin-bottom: 0px;
  }

  /*.avue-crud__grid__content .avue-crud__grid__label {*/
  /*  width: 20%;*/
  /*  text-align: right;*/
  /*  white-space: pre-wrap;*/
  /*}*/


  .avue-crud__grid__content .index{
    width: 10%!important;
  }

  .el-card .el-button{
    font-size: 12px!important;
    margin: 1px!important;
  }

  .el-card__body .avue-crud__left{
    width: 68% !important;
  }

  .avue-crud__grid__item {
    margin-bottom: 5px!important;
  }

  /*.el-card__body .avue-crud__right{*/
  /*  width: 30% !important;*/
  /*}*/


  /*.title .avue-crud__grid__label {*/
  /*  display: inline!important;*/
  /*}*/



   .avue-crud__grid__content .title .avue-crud__grid__label{
    display:inline !important;
  }

  .avue-crud__grid__content .title:nth-child(1) .avue-crud__grid__label{
    display:none !important;
  }

  .avue-crud__grid .title .avue-crud__grid__value {
    font-weight: 700;
    line-height: 20px;
    font-size: 12px;
    color: #666;
  }




}
</style>
